$(function () {
    // DOM加载完毕后获取cookie中的值
    !(function () {
        // 获取 cookie 中的数据
        var themeInfo = getCookie("themeInfo") || null;
        var $li = $("#header #theme ul li");
        var $nav = $("#header #nav");
        var $title = $("#main #categories > .title");
        var $content = $("#main #categories > .content");
        if (!themeInfo) {
            $li.eq(0).css({backgroundPositionY: "-15px"}).siblings().css({backgroundPositionY: "0"});
            $nav.css({background: "#4A4A4A"});
        } else {
            themeInfo = JSON.parse(themeInfo);
            var index = parseInt(Object.keys(themeInfo)[0]);
            $li.eq(themeInfo[0]).css({backgroundPositionY: "-15px"}).siblings().css({backgroundPositionY: "0"});
            $nav.css({background: themeInfo[1]});
            $title.css({background: themeInfo[2]});
            $content.css({border: "1px solid" + themeInfo[2]});
        }
    })();

    // header 区域处理
    !(function () {
        // 搜索框处理(获取焦点或失去焦点)
        handleSearch()
        // nav处理(二级导航)
        handleNav();
        // 切换主题处理
        toggleTheme();

        function handleSearch() {
            // 获取搜索框元素
            var $searchInput = $("#header #search_goods");

            // 输入框获取焦点时, 清除value值
            $searchInput.focus(function () {
                var text = $(this).val();
                if (text === "请输入商品名称") {
                    // 清除value值
                    $(this).val("");
                }
            }).blur(function () {
                var text = $(this).val().replace(/\s/g, "")
                if (!text) {
                    $(this).val("请输入商品名称");
                }
            });
        }

        function handleNav() {
            var $li = $("#header #nav > ul > li");
            $li.find(".sub-nav").hide();
            $li.hover(function () {
                $(this).find(".sub-nav").fadeIn(300).siblings(".sub-nav").hide();
            }, function () {
                $(this).find(".sub-nav").hide();
            })
        }

        function toggleTheme() {
            var $li = $("#header #theme ul li");
            var $nav = $("#header #nav");
            var $title = $("#main #categories > .title");
            var $content = $("#main #categories > .content");
            $li.on("click", function () {
                $(this).css({backgroundPositionY: "-15px"}).siblings().css({backgroundPositionY: "0"});
                var themeColorIndex = $(this).index();
                var themeColorName = $(this).data("bg");
                var themeColorName1 = $(this).data("bg1");
                var themeInfo = [themeColorIndex, themeColorName, themeColorName1];
                $nav.css({background: themeColorName});
                $title.css({background: themeColorName1});
                $content.css({border: "1px solid" + themeColorName1});

                // 设置cookie, 存储theme信息
                setCookie("themeInfo", JSON.stringify(themeInfo));
            })
        }
    })();

    // main 区域处理
    !(function () {
        // 轮播图切换
        carousel();
        // 打折区域 悬浮旋转处理
        disCountRotate();
        // 鼠标悬浮title的特效处理
        handleTitle()
        // 品牌活动, 点击滑动
        activitySlide()

        function carousel() {
            // 获取相关元素
            var $carousel = $("#main #ad #ad-t #carousel");
            var $picUl = $carousel.find("ul");
            var $picUlChild = $picUl.children();
            var $navOlChild = $carousel.find("ol").children();

            var timer; // 定时器的名字
            var index = 0; // 开始轮播的索引值
            var flag = false; // 标识定时器

            // 自动播放
            timer = setInterval(handleCarousel, 4000);

            // 鼠标移入 导航框, 获取索引值, 显示对应的广告, 并且停止定时器, 移除则重新开启定时器
            $navOlChild.mouseenter(function () {
                if (!flag) {
                    flag = true;
                    clearInterval(timer);
                    var ind = $(this).index();
                    // 把当前索引值赋值给index
                    index = ind;

                    $picUlChild.eq(ind).fadeIn(400).siblings().hide();
                    $navOlChild.eq(ind).addClass("active").siblings().removeClass("active");
                }
            }).mouseleave(function () {
                // 重新开启定时器
                timer = setInterval(handleCarousel, 4000);
                flag = false;
            });

            // 鼠标移入Ul包裹容器, 停止定时器; 移出包裹容器, 开启定时器
            $picUl.mouseenter(function () {
                clearInterval(timer);
            }).mouseleave(function () {
                timer = setInterval(handleCarousel, 4000);
            });

            // 定时器处理函数
            function handleCarousel() {
                index++;

                // 如果轮播到与元素的个数一样, 就重新从0开始
                if (index === $picUlChild.length) {
                    index = 0;
                }

                // 找到指定索引的元素进行操作
                $picUlChild.eq(index).fadeIn(400).siblings().hide();
                $navOlChild.eq(index).addClass("active").siblings().removeClass("active");
            }

        }

        function disCountRotate() {
            var $discount = $("#main #ad #ad-t #newDynamic #discount");
            $discount.mouseenter(function () {
                $(this).find("img").css({transform: "rotate(720deg)", transition: "transform .6s ease-in-out"});
            }).mouseleave(function () {
                $(this).find("img").css({transform: "rotate(0)", transition: "transform .6s ease-in-out"});
            });
        }

        function handleTitle() {
            var $newDynamic = $("#main #ad #ad-t #newDynamic");
            var $content = $newDynamic.find(".content")
            var $liNode = $newDynamic.find(".content ul li");

            // x 和 y 表示了title框与元素之间横轴和纵轴之间的距离
            var x, y;

            for (var i = 0; i < $liNode.length; i++) {
                var $aNode = $liNode.eq(i).find("a");
                $aNode.mousemove(function (e) {
                    x = (e.pageX + 10) + "px";
                    y = (e.pageY + 24) + "px";
                    $("#title").css({"top": y, "left": x}).show("fast");
                }).mouseenter(function () {
                    var defaultTitle =  $(this).attr("title");
                    $(this).attr("myTitle", defaultTitle); // 获取默认的title
                    $(this).attr("title", ""); // 获取后将默认的清空
                    //创建新的 div 元素，在CSS样式中已定义样式
                    var title = "<div id='title'>" + defaultTitle + "<\/div>";
                    $content.append(title); //把它追加到文档中
                    // 设置x坐标和y坐标，并且快速显示
                }).mouseleave(function () {
                    $(this).attr("title", $(this).attr("myTitle"));
                    $("#title").remove(); //光标离开时移除
                })
            }
        }

        function activitySlide() {
            var $activity = $("#main #ad #activity");
            var $ulNode = $activity.find(".content ul");
            var $navLis = $activity.find(".nav").children();
            var $maskNodes = $ulNode.children().find('.mask');

            // 点击导航部分, ul滑动到指定位置
            $navLis.click(function () {
                // 获取当前点击元素的索引值
                var index = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                var left = -100 * index;
                // 动画效果
                $ulNode.animate({left: left + "%"});
            })

            // 鼠标悬浮 到指定元素, 遮罩层显示, 离开隐藏
            $maskNodes.mouseenter(function () {
                $(this).addClass("showMask");
            }).mouseleave(function () {
                $(this).removeClass("showMask");
            });
        }
    })();
});
